<template>
    <div>
        <div>
            <h2>state</h2>
            <p>{{ demo.a }}</p>
            <p>{{ demo.b }}</p>
        </div>
        <div>
            <h2>getters</h2>
            <p>{{ demo.doubleA }}</p>
            <p>{{ demo.doubleB }}</p>
            <p>{{ demo.doubleBoth }}</p>
        </div>
        <div>
            <h2>actions-同步</h2>
            <p><button @click="demo.addA">a++</button></p>
            <p><button @click="demo.addAN(10)">a+10</button></p>
        </div>
        <div>
            <h2>actions-异步</h2>
            <p><button @click="demo.addA_Async">a++</button></p>
            <p><button @click="demo.addB_Async()">b++</button></p>
            <p><button @click="demo.addBoth_Async()">b++</button></p>
        </div>
    </div>
</template>



<script>
    // 选项式
    // 使用store  

    // 引入store模块
    import {useDemoStore} from "@/stores/demo.js";

    // 调用方法 获取store实例
    let demo = useDemoStore();  // 获取store实例

    export default {
        data(){
            return {
                demo
            }
        },
        mounted(){
            console.log("demo",this.demo);
        }

    }
</script>

<script setup>
    /* import {useDemoStore} from "@/stores/demo.js";

    let demo = useDemoStore();  // 获取store实例 */
    

</script>

<style lang="scss" scoped>

</style>